<template>
  <footer class="app-footer">
    <div class="footer-main">
      <div class="footer-content">
        <div class="footer-section">
          <h4>关于我们</h4>
          <ul class="footer-links">
            <li><NuxtLink to="/about">公司简介</NuxtLink></li>
            <li><NuxtLink to="/contact">联系我们</NuxtLink></li>
            <li><NuxtLink to="/join">加入我们</NuxtLink></li>
            <li><NuxtLink to="/news">新闻动态</NuxtLink></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>服务支持</h4>
          <ul class="footer-links">
            <li><NuxtLink to="/help">帮助中心</NuxtLink></li>
            <li><NuxtLink to="/terms">服务条款</NuxtLink></li>
            <li><NuxtLink to="/privacy">隐私政策</NuxtLink></li>
            <li><NuxtLink to="/complaint">投诉建议</NuxtLink></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>商家服务</h4>
          <ul class="footer-links">
            <li><NuxtLink to="/seller/join">商家入驻</NuxtLink></li>
            <li><NuxtLink to="/seller/center">商家中心</NuxtLink></li>
            <li><NuxtLink to="/seller/rules">入驻规则</NuxtLink></li>
            <li><NuxtLink to="/seller/guide">操作指南</NuxtLink></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h4>联系方式</h4>
          <ul class="footer-contact">
            <li>
              <i class="fas fa-phone-alt"></i>
              客服热线：400-888-8888
            </li>
            <li>
              <i class="fas fa-envelope"></i>
              邮箱：service@changxin.com
            </li>
            <li>
              <i class="fas fa-map-marker-alt"></i>
              地址：十堰市郧阳区谭家湾镇
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="footer-bottom">
      <div class="footer-bottom-content">
        <p>© 2024 华中食用菌线上交易平台 版权所有</p>
        <p>
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">鄂ICP备2024XXXXXX号</a>
          <span class="separator">|</span>
          <a href="#" target="_blank" rel="noopener">
            鄂公网安备 42130202XXXXXX号
          </a>
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.app-footer {
  background: #2c2c2c;
  color: #999;
  margin-top: 50px;
  
  .footer-main {
    padding: 40px 0 30px;
    
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      
      .footer-section {
        h4 {
          color: #fff;
          font-size: 16px;
          font-weight: 600;
          margin: 0 0 20px;
          padding-bottom: 10px;
          border-bottom: 2px solid #e4393c;
          display: inline-block;
        }
        
        .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
          
          li {
            margin-bottom: 12px;
            
            a {
              color: #999;
              text-decoration: none;
              font-size: 14px;
              transition: all 0.3s;
              
              &:hover {
                color: #e4393c;
                padding-left: 5px;
              }
            }
          }
        }
        
        .footer-contact {
          list-style: none;
          padding: 0;
          margin: 0;
          
          li {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 14px;
            color: #999;
            line-height: 1.6;
            
            i {
              color: #e4393c;
              margin-top: 3px;
              font-size: 14px;
              width: 16px;
            }
          }
        }
      }
    }
  }
  
  .footer-bottom {
    background: #1a1a1a;
    padding: 20px 0;
    
    .footer-bottom-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;
      
      p {
        margin: 5px 0;
        font-size: 13px;
        color: #666;
        
        a {
          color: #666;
          text-decoration: none;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          transition: all 0.3s;
          
          &:hover {
            color: #e4393c;
          }
          
          img {
            height: 14px;
          }
        }
        
        .separator {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>

